<div class="oppia-pre-avatar-oppia">
  <div ng-if="!contentMemento" class="protractor-test-edit-content"
       ng-click="openStateContentEditor()"
       ng-class="{'oppia-editable-section': editabilityService.isEditable()}">
    <span ng-if="editabilityService.isEditable()" class="glyphicon glyphicon-pencil oppia-editor-edit-icon" title="Edit State Content">
    </span>
    <div class="oppia-state-content-display protractor-test-state-edit-content oppia-transition-200" ng-class="{'oppia-prevent-selection': editabilityService.isEditable()}" title="State Content">
      <span ng-show="content[0].value == ''" class="oppia-placeholder">
        You can give context to the learner here, and ask a question -- then,
        in the space below, choose a suitable way for the learner to respond.
      </span>
      <span angular-html-bind="content[0].value" class="protractor-test-state-content-display"></span>
    </div>
  </div>
</div>

<!-- The margin-bottom here preserves parity with the 'well' in the readonly mode. -->
<div ng-if="!!contentMemento" class="oppia-state-item-editor-div protractor-test-state-content-editor">
  <schema-based-editor schema="STATE_CONTENT_SCHEMA" local-value="content[0].value">
  </schema-based-editor>
  <div style="margin-top: 2px;">
    <button type="button" class="btn btn-success oppia-save-state-item-button protractor-test-save-state-content pull-right" ng-click="onSaveContentButtonClicked()">Save Content</button>
    <button type="button" class="btn btn-default pull-right" ng-click="cancelEdit()">Cancel</button>
    <div style="clear: both;"></div>
  </div>
</div>
